<template>
	<view class="center">
		<!-- <view class="tit"></view>
		<view class="header">
			<view class="arrow" @tap="$back()">
				<image class="lefts" style="width: 20rpx;height: 40rpx;" src="../../../../static/stock/left.png" mode="aspectFit"></image>
			</view>
			<view class="tit f36 cfff">筛选</view>
			<view class="btn f32 cfff btn-plain-primary btn-radius" @tap="$open('../screen/screen')">
				<text>重置</text>
			</view>
		</view> -->
		<hea-ders title="收款方式">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<view class="ima" slot='official' @click="Sizer">
				<text>清除</text>
			</view>
		</hea-ders>
		<!-- 日期 -->
		<view class="screen_item">
			<view class="date_item">
				<dyDatePicker placeholder="起始日期" :childValue="from" :minSelect="from_minSelect" :maxSelect="from_maxSelect"
				 :iconshow="false" @getData="getFromData"></dyDatePicker>
			</view>
			<image src="../../../../static/images/1372.png" mode=""></image>
			<view class="filter_inputline">至</view>
			<view class="date_item">
				<dyDatePicker placeholder="结束日期" :minSelect="to_minSelect" :childValue="to" :maxSelect="to_maxSelect" :iconshow="false"
				 @getData="getToData"></dyDatePicker>
			</view>
			<image src="../../../../static/images/1372.png" mode=""></image>
		</view>
		<!-- 内容 -->
		<view class="screen_two"@tap="$open('../../collection/customer/customer')">
			<view class="">
				<text>客户</text>
			</view>
			<view class="text">
				<text>选择</text>
				<image src="../../../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>

		<view class="uni-padding-wrap uni-common-mt">
			<text>显示期末为0</text>
			<view>
				<switch @change="switch2Change" />
			</view>
		</view>
		<view class="screen_foot">
			<button type="default">确定</button>
		</view>
	</view>
</template>

<script>
	import dyDatePicker from '@/components/dy-Date/dy-Date.vue'
	// import
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			dyDatePicker,
			heaDers
		},
		data() {
			return {
				from_minSelect: '1900/01/01',
				from_maxSelect: '2050/12/31',
				to_minSelect: '1900/01/01',
				to_maxSelect: '2050/12/31',
				from: '',
				to: '',
			};
		},
		methods: {
			getFromData(time) {
				this.to_minSelect = time
				this.from = time
			},
			getToData(time) {
				this.from_maxSelect = time
				this.to = time
			},
			getData() {
				// 
			},
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
			},
			switch2Change: function(e) {
				console.log('switch2 发生 change 事件，携带值为', e.target.value)
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss">
	.center {
		width: 100%;
		height: 100vh;
		background: #F5F5F5;
	}
	.title {
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: rgba(36, 153, 246, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		image {
	
			width: 22rpx;
		}
		text {
			font-size: 36rpx;
			color: #fff;
			font-weight: 400;
			font-family: PingFang SC;
		}
		.ima {
			image {
				width: 40rpx;
				margin-left: 5rpx;
			}
			text{
				font-size: 24rpx;
			}
		}
	}
	
	.screen_item {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;

		image {
			width: 24rpx;
			height: 20rpx;
			position: relative;
			left: -20rpx;
		}

		.lable {
			position: absolute;
			left: 10px;
			top: 0px;
			color: #333333;
		}

		.filter_inputline {
			font-size: 28rpx;
			color: #424242;
		}

		.date_item {
			float: left;
			width: 240upx;
			overflow: hidden;
			display: inline-block;
			text-align: center;
			height: 72rpx;
			line-height: 72rpx;
			font-size: 28rpx;

			// font-size: 28rpx;
			&:last-child {
				// float: right;
			}

			input {
				height: 72rpx;

				.uni-input-placeholder {
					color: #b5b8c2;
				}
			}

		}

	
	}

	.screen_two {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		background: #fff;
		margin-top: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		text {
			font-size: 28rpx;
			color: #424242;
			font-family: PingFang SC;
			font-weight: 500;
		}

		image {
			width: 16rpx;
			height: 32rpx;
			padding-left: 8rpx;
			padding-top: 5rpx;
		}

		.text text {
			color: #9E9E9E;
		}
	}

	.uni-common-mt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 0rpx 0rpx 30rpx;
		background: #fff;
		text {
			font-size: 28rpx;
			color: #424242;
		}
		switch{
			transform: scale(0.6);
		}
	}
	.screen_foot{
		position: absolute;
		width: 100%;
		bottom: 0;
		button{
			height:88rpx;
			background:rgba(35,153,246,1);
			border-radius: 0;
			color: #fff;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			line-height: 88rpx;
		}
	}
</style>
